<template>
  <div class="page">
    <van-cell-group>
      <van-field v-model="truename" placeholder="请输入姓名" />
      <van-field v-model="mobile" placeholder="请输入手机号" />
      <van-field v-model="imgCode" placeholder="请输入图形验证码">
        <div slot="button" class="codeImg">
          <vue-img-verify
            style=" transform:scale(0.78)"
            @getImgCode="getImgCode"
            ref="vueImgVerify"
          />
        </div>
      </van-field>
      <van-field v-model="smscode" placeholder="请输入短信验证码">
        <van-button
          slot="button"
          @click="getcode()"
          class="btncode"
          :class="{active:iscodeFull}"
          size="small"
          type="info"
        >{{show}}</van-button>
      </van-field>
      <van-field
        v-model="passwd"
        :type="passwordtype"
        :right-icon="showpsd"
        @click-right-icon="clickEye"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <div class="loginItem" :class="{active:btnstatu}" @click="register">注册并登录</div>
    <p class="loginM-register">
      已有账号？
      <router-link class="a" to="/login">去登录</router-link>
    </p>
    <p class="loginM-register reset-loginM-regisetr">
      用户注册即代表同意
      <span class="a" @click="showXy">《鑫椤资讯用户许可协议》</span>
    </p>
    <van-popup class="van-popups" v-model="showDialog">
      <p class="titles">用户许可协议</p>
      <div class="xycontent">
        <div class="coentent">
          <p>鑫椤资讯隶属于上海鑫椤网络科技有限公司，系APP内的资料提供者，并拥有此APP内相应资料的版权。未经上海鑫椤网络科技有限公司的明确书面许可，任何人不得复制或在非上海鑫椤网络科技有限公司所属的APP上做镜像。</p>
          <p class="p1">隐私声明</p>
          <p>
            我们以本隐私申明声明对访问者隐私保护的许诺。以下文字公开在鑫椤资讯APP中对信息收集和使用的情况。本站的隐私申明正在不断改进中，随着鑫椤资讯APP服务范围的扩大，我们会随时更新我们的隐私申明。我们欢迎您随时会来查看本申明。请向service@ iccsino.com反馈您的意见。
            在同意鑫椤资讯服务协议（“协议”）之时，你已经同意我们按照本隐私申明来使用和披露您的个人信息。本隐私申明的全部条款属于该协议的一部份。
            手机号和密码 当您打算注册成会员后，我们要求您选择一个手机号和密码，还要提供真实姓名以便在您丢失密码后我们可以电话确认您的身份。您只能通过您的密码来使用您的帐号。如果您泄漏了密码，您可能丢失了您的个人识别信息，并且有可能导致对您不利的司法行为。因此不管任何原因使您的密码安全受到危及，您应该立即通过客服电话和我们取得联系。
            注册信息 当您在注册为会员时，我们要求您填写一张注册表。注册表要求提供您的真实姓名，电话号码，和电子邮件地址。另外，您还被要求提供您的公司的地址，电话号码和贵公司的服务和产品的简短说明。您还有权选择来填写附加信息。这些信息可能包括您公司所在的省份和城市，时区和邮政编码，传真号码，主页和您的职务。我们使用注册信息来获得会员的统计资料。我们将会用这些统计数据来给我们的会员分类，例如年龄、产业和国家，以便有针对性地向我们的会员提供新的服务和机会。我们会通过您的邮件地址来通知您这些新的服务和机会。
            您的交易行为 我们跟踪IP地址仅仅只是为了安全的必要。如果我们没有发现任何安全问题，我们会及时删除我们收集到的IP地址。我们还跟踪全天的页面访问数据。全天页面访问数据被用来反映网站的流量，一是我们可以为未来的发展制定计划（例如，增加服务器）。
            第三方 我们的网站公布了用户提交的商业机会和报价，而其他用户可以查询这些报价和商业机会。我们不会向任何第三方提供，出售，出租，分享和交易用户的个人信息，除非第三方和中国石墨碳素网一起为网站和会员提供服务并且在该服务结束后已将被禁止访问包括其以前能够访问的所有这些资料。当我们被法律强制或依照政府要求提供您的信息时我们将善意地披露您的资料。
            公开的交易信息 您提供发布的供贸易的物品信息或报价将被显示在公共区域，对任何用户来说是公开的。请注意所有在这些场所公开的信息会成为公共信息，请您在决定公布您的个人信息前仔细考虑。
            安全 我们网站有相应的安全措施来确保我们掌握的信息不丢失，不被滥用和变造。这些安全措施包括向其它服务器备份数据和对用户密码加密。尽管我们有这些安全措施，但请注意在因特网上不存在“完善的安全措施”。
          </p>
          <p class="p1">联系我们</p>
          <p>如果你对本隐私申明或鑫椤资讯的隐私保护措施以及您在使用中的问题有任何意见和建议。</p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
import { register, requestdx, login } from "../../api/user";
import vueImgVerify from "../../components/canvasImg";
import utils from "../../assets/js/util";
import { getNowSS, objFull } from "../../assets/js/tools";
export default {
  name: "Register",
  components: {
    vueImgVerify
  },
  data() {
    return {
      showDialog: false,
      showpsd: "closed-eye",
      passwordtype: "password",
      truename: "", //姓名
      mobile: "", //手机
      passwd: "", //输入密码
      imgCode: "", //写入图形验证码
      imgCodeSet: "", //获取的图形验证码数据
      smscode: "", //短信验证码
      show: "获取验证码", //验证码对应文字
      count: 60,
      timer: 60,
      isCodeClik: false, //防止多次点击验证码
      isClick: false
    };
  },
  computed: {
    iscodeFull() {
      let params = {
        mobile: this.mobile,

        imgCode: this.imgCode
      };
      if (objFull(params)) {
        return true;
      } else {
        return false;
      }
    },
    btnstatu() {
      let params = {
        truename: this.truename,
        mobile: this.mobile,
        passwd: this.passwd,
        smscode: this.smscode,
        imgCode: this.imgCode
      };
      if (objFull(params)) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    showXy() {
      this.showDialog=true
    },
    clickEye() {
      // 条件判断  ？ A(是) ： B(否)   并返回值
      if (this.showpsd == "eye-o") {
        this.showpsd = "closed-eye";
        this.passwordtype = "password";
      } else {
        this.showpsd = "eye-o";
        this.passwordtype = "text";
      }
    },
    subductionSecond() {
      let timerSet = setInterval(() => {
        this.timer--;
        this.show = this.timer + "s后再次获取";
        if (this.timer < 0) {
          this.show = "获取验证码";
          this.isCodeClik = false;
          clearInterval(timerSet);
        }
      }, 1000);
    },
    getcode() {
      if (this.isCodeClik) {
        this.$toast("点击后60s内不可点击");
        return;
      }
      if (!utils.verifyPhone(this.mobile)) {
        this.$toast("请输入正确的手机号");
        return false;
      }
      if (!this.imgCode) {
        this.$toast("图形验证码不可以为空");
        return false;
      } else if (this.imgCode.toLowerCase() != this.imgCodeSet.toLowerCase()) {
        this.$toast("图形验证码错误");
        return false;
      }
      let obj = {
        aid: getNowSS(),
        mobile: this.mobile
      };

      this.isCodeClik = true;
      requestdx(obj).then(res => {
        if (res.code == "0000") {
          this.timer = this.count;
          this.show = this.timer + "s后再次获取";
          this.subductionSecond();
        } else {
          this.isCodeClik = false;
          this.$toast(res.msg);
        }
      });
    },
    getImgCode(code) {
      this.imgCodeSet = code;
      this.imgCode = "";
    },
    register() {
      if (!this.truename) {
        this.$toast("姓名不可以为空");
        return false;
      } else if (this.truename.length < 2) {
        this.$toast("请输入正确的姓名");
        return false;
      }
      if (!utils.verifyPhone(this.mobile)) {
        this.$toast("请输入正确的手机号");
        return false;
      }
      if (!this.passwd) {
        this.$toast("密码不可以为空");
        return false;
      }
      if (!this.smscode) {
        this.$toast("短信验证码不可以为空");
        return false;
      }
      let params = {
        truename: this.truename,
        mobile: this.mobile,
        passwd: this.passwd,
        smscode: this.smscode
      };
      if (this.isClick) {
        return;
      }
      this.isClick = true;
      //注册成功直接登录
      register(params).then(res => {
        this.isClick = false;
        if (res.code === "0000") {
          this.$toast(res.msg);
          let loginobj = {
            umobile: this.mobile,
            upasswd: this.passwd
          };
          login(loginobj).then(res => {
            if (res.code == "0000") {
              this.$store.dispatch("acLoginInfor", res.data);
              this.$router.push({ path: "/" });
            } else {
              this.$toast(res.msg);
            }
          });
        } else {
          this.$toast(res.msg);
        }
      });
    }
  }
};
</script>

<style scoped  lang="less">
.van-popups {
  width: 7rem;
  padding: 1.2rem 0.2rem 0.6rem;
  height: 70%;
border-radius: .06rem;
  .titles {
    width: 100%;
    font-size: 0.4rem;
    text-align: center;
    line-height: 0.6rem;
    position: absolute;
    top: 0.4rem;
    left: 0;
  }
  .xycontent {
    height: 100%;
    position: relative;
    overflow: scroll;
    p{
      line-height: 1.5;
      margin-bottom: .2rem;
      text-align: justify;
    }
    .p1{
      font-size: .3rem;
      font-weight: bold
    }
  }
}

.page {
  height: 100%;
  background: #ffffff;
}
 
.btncode {
  background: rgba(242, 243, 245, 1);
  border-color: rgba(242, 243, 245, 1);
  color: rgba(153, 153, 153, 1);
  &.active {
    background: rgba(228, 152, 41, 1);
    color: rgba(255, 255, 255, 1);
  }
}
.codeImg {
  width: 100px;
  height: 30px;
}
.a {
  transform: scale(0.8);
}
.loginItem {
  width: 6.3rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  margin: 1rem auto 0.3rem;
  background: rgba(242, 243, 245, 1);
  border-radius: 0.08rem;
  color: rgba(131, 134, 133, 1);
  &.active {
    background: rgba(228, 152, 41, 1);
    color: #ffffff;
  }
}
.loginM-register {
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  color: rgba(131, 134, 133, 1);
  .a {
    color: rgba(228, 152, 41, 1);
  }
}
.reset-loginM-regisetr {
  position: absolute;
  width: 100%;
  bottom: 0.4rem;
  font-size: 0.2rem;
}
</style>
